<template>
  <!-- 课程列表 -->
  <div>
    <template v-if="list && list.length>0">
      <div class="list-wrapper flex-wrap" v-if="!vertical">
        <div class="list-item" v-for="(item, index) in list" :key="index" @click="toPage(item)">
          <div class="list-item-img">
            <div class="item-default-img flex-wrap flex-middle flex-center" :style="{
                        background: 'url(' + item.logoHttpUrl + ') center no-repeat'
                    }" v-if="item.logoHttpUrl">
              <div class="item-default-text ellipsis2" v-if="showTitle === '1'">{{ item.name }}</div>
            </div>
            <div class="item-default-img flex-wrap flex-middle flex-center" v-else>
              <div class="item-default-text ellipsis2">{{ item.name }}</div>
            </div>
            <!-- <div class="list-item-status">{{statusList[item.examStatus]}}</div> -->
            <div class="abs-tip-left-up" v-if="item.isTop == 1">
              <span class="abs-tip-yellow">置顶</span>
            </div>
          </div>
          <div class="item-title fs-14 fc-333 ellipsis bold">{{ item.name }}</div>
          <div class="item-icon-wrap">
            <p class="fs-12 fc-999">开始时间：{{ item.startDate }}</p>
            <p class="fs-12 fc-999">结束时间：{{ item.endDate || '不限制' }}</p>
          </div>
          <div class="item-data flex-wrap flex-middle">
            <!-- <span class="fs-12 fc-primary flex-item" v-if="item.examStatus === '1' || item.examStatus === '2'">{{statusList[item.examStatus]}}</span>
            <span class="fs-12 fc-999 flex-item" v-else>{{statusList[item.examStatus]}}</span> -->
          </div>
        </div>
      </div>
      <div class="list-wrapper flex-wrap vertical" v-else>
        <div class="list-item flex-wrap flex-middle" v-for="(item, index) in list" :key="index" @click="toPage(item)">
          <div class="list-item-img">
            <div class="item-default-img flex-wrap flex-middle flex-center" :style="{
                        background: 'url(' + item.logoHttpUrl + ') center no-repeat'
                    }" v-if="item.logoHttpUrl">
              <div class="item-default-text ellipsis2" v-if="showTitle === '1'">{{ item.name }}</div>
            </div>
            <div class="item-default-img flex-wrap flex-middle flex-center" v-else>
              <div class="item-default-text ellipsis2">{{ item.name }}</div>
            </div>
            <!-- <div class="list-item-status">{{statusList[item.examStatus]}}</div> -->
            <div class="abs-tip-left-up" v-if="item.isTop == 1">
              <span class="abs-tip-yellow">置顶</span>
            </div>
          </div>
          <div class="list-right flex-item">
            <div class="item-title fs-14 fc-333 ellipsis bold">{{ item.name }}</div>
            <div class="item-icon-wrap">
              <p class="fs-12 fc-999">开始：{{ item.startDate }}</p>
              <p class="fs-12 fc-999">结束：{{ item.endDate || '不限制' }}</p>
              <!--                      <p class="fs-12 fc-999" v-if="isCourseQuestion">答题时长：{{ item.timeLimit ? getTime(item.timeLimit) : '不限制' }}</p>-->
              <!--                      因为放不下, 产品要求只放内容, 不放描述-->
              <p class="fs-12 fc-999" v-if="isCourseQuestion">{{ item.timeLimit ? getTime(item.timeLimit) : '不限制' }}
                | {{ allowList[Number(item.isAllowManytime)] }}</p>
            </div>
            <div class="item-data flex-wrap flex-middle">
              <span class="fs-12 fc-primary flex-item"
                    v-if="item.status === 'I' || item.status === 'Q' || item.status === 'N'">{{ statusList[item.status] }}</span>
              <span class="fs-12 fc-999 flex-item" v-else>{{ statusList[item.status] }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <Data-empty v-if="!isHome"></Data-empty>
    </template>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {courseTypes} from '@/assets/js/constant'
import {getTime} from "../../assets/js/util";
import DataEmpty from "@/components/common/DataEmpty.vue";

export default {
  components: {DataEmpty},
  data() {
    return {
      statusList: {
        'P': '已参与',
        'I': '继续',
        'N': '未参与',
        'Q': '再次参与',
        'O': '已过期'
      },
      allowList: ["只答一次", "每天一次", "不限制"],
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    vertical: { // 竖版显示
      type: Boolean,
      default: false
    },
    pageKey: { // 跳转id的key
      type: String,
      default: ''
    },
    progress: { // 是否显示课程学习进度（我的课程有效）
      type: Boolean,
      default: false
    },
    hideReco: {
      type: Boolean,
      default: false
    },
    isCourseQuestion: {
      type: Boolean,
      default: false
    },
    isHome: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters({
      showTitle: 'siteInfo/showTitle'
    })
  },
  mounted() {
  },
  methods: {
    getTime,

    toPage(item) {
      // this.calcCourseClick(item)
      if (item.status !== 'O') {
        this.$uniPush({
          name: 'questionnaire-start-id',
          params: {
            id: item.surveyId
          }
        })
        /*if (item.status === 'P' && item.isAllowManytime === '0') {
            this.$toast.warning('当前问卷只能答题一次')
        } else {
            this.$uniPush({
                name: 'questionnaire-start-id',
                params: {
                    id: item.surveyId
                }
            })
        }*/
      } else {
        this.$toast.warning('当前问卷已过期')
      }
    },

    // 增加点击率
    calcCourseClick(item) {
      this.$api.course.courseClick({courseId: item.courseId})
    },
  },
}
</script>

<style lang="scss" scoped>
.list-wrapper {
  flex-wrap: wrap;
  padding-bottom: 4px;

  &.vertical {
    .list-item {
      width: 100%;
      padding: 15px 0;
      align-items: flex-start;

      &:nth-child(2n) {
        margin-left: 0;
      }

      .list-item-img {
        width: 38.4vw;
        height: 21.6vw;
        margin-bottom: 0;

        .item-default-img {
          min-width: 38.4vw;
          width: 38.4vw;
          height: 21.6vw;
        }
      }

      .item-icon-wrap {
        height: 30px;
        line-height: 15px;
        margin: 2px 0 8px;
      }

      .list-right {
        width: calc(100% - 38.4vw - 9px);
        margin-left: 9px;
      }
    }
  }

  .list-item {
    width: calc((100% - 13px) / 2);
    padding: 6px 0 10px;
    position: relative;

    &:nth-child(2n) {
      margin-left: 13px;
    }

    .list-item-img {
      position: relative;
      width: 100%;
      height: 24.8vw;
      margin-bottom: 5px;

      .item-default-img {
        width: 100%;
        height: 24.8vw;
        background: url('/static/image/course-img.png') no-repeat;
        background-size: contain !important;

        .item-default-text {
          font-size: 12px;
          color: #fff;
          text-align: center;
          padding: 0 10px;
        }
      }

      .list-item-status {
        color: #fff;
        font-size: 12px;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 2px 0;
        position: absolute;
        text-align: center;
        background: rgba(30, 166, 157, 0.74);
      }

      .abs-tip-left-up {
        position: absolute;
        left: 4px;
        top: 0;
        line-height: 16px;
      }
    }

    .item-icon-wrap {
      height: 20px;

      .item-icon {
        font-size: 10px;
        color: #7F7F7F;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        background: #F5F5F5;
        border-radius: 2px;

        & + .item-icon {
          margin-left: 4px;
        }
      }
    }

    .item-data {
      height: 25px;

      .item-data-item {
        & + .item-data-item:before {
          content: '|';
          margin: 0 6px;
        }
      }
    }

  }
}
</style>